<template>
  <view>
  <van-cell-group>
		<van-field
		  label="GF账号"
		  :value="GF_ACCOUNT"
		  placeholder="请输入GF账号"
		  use-button-slot
		  @input="updateGF_ACCOUNT"
		>
		  <van-button slot="button" size="small" type="default" @click="togglePopup">选择账号</van-button>
		</van-field>
		<van-field
		  label="+86"
		  :value="mob"
		  placeholder="请输入手机号码"
		  use-button-slot
		  @input="updateMob"
		>
		  <van-button slot="button" size="small" type="default" @click="getCode">验证码</van-button>
		</van-field>
		<van-field
		  label="验证码"
		  :value="moblie_sms_code"
		  placeholder="请输入验证码"
		  @input="updateMoblieSmsCode"
		/>
		<van-field
		  label="昵称"
		  :value="name"
		  placeholder="建议填写真实姓名"
		  @input="updateName"
		/>
		  <van-field
			label="密码"
			:value="password"
			placeholder="6-16位数字、字母、符号"
			@input="updatePassword"
			:type="isPasswordVisible ? 'text' : 'password'"
			:right-icon="isPasswordVisible ? '/static/login/visible.png' : '/static/login/invisible.png'" 
			@click-icon="togglePasswordVisibility"
		  />
	  </van-cell-group>
    
    <view class="policy btn">
      <van-checkbox :value="checked" @change="onChange" style="font-size: 32rpx;">已阅读并同意</van-checkbox>
      <text @click="show('agreement')" class="icon">《服务协议》</text>
      <text style="margin-top:8rpx;font-size: 32rpx;color: black;">和</text>
      <text @click="show('agreement')" class="icon">《隐私协议》</text>
    </view>
    
    <button class="button btn" :style="{ backgroundColor: buttonColor }" @click="Login_phone">
      注册
    </button>
	
	<view v-if="isPopupVisible" class="popup-content custom-dialog">
	  <view class="account-row" v-for="(row, index) in accountRows" :key="index">
		<view
		  v-for="(account, idx) in row"
		  :key="idx"
		  class="account-item"
		  :class="{ 'selected': GF_ACCOUNT === account }"
		  @click="selectAccount(account)"
		>
		  {{ account }}
		</view>
	  </view>
	  <view class="refresh-text" @click="refreshAccounts">
		<image 
		  class="refresh-icon" 
		  mode="heightFix" 
		  src="/static/login/select.png" 
		></image>
		换一换
	  </view>
	</view>

  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import decRegisterApi from "/api/dec/decUser/decRegisterApi";
import cryptoUtils from '@/utils/CryptoJS';

// 全局状态globalData
import { storeToRefs } from "pinia";
import { useGlobalDataStore } from "@/globalData.js"
const { globalData } = storeToRefs(useGlobalDataStore());

const visit_data = ref({});
    const system_info = ref({});

    const num = ref([]);
    const isPopupVisible = ref(false);
    const firstLoad = ref(true);

	const GF_ACCOUNT= ref('');
	const mob = ref('');
	const moblie_sms_code = ref('');
	const name = ref('');
	const password = ref('');
	const checked = ref(false);
	const isPasswordVisible = ref(true); 
	
	// 计算按钮的颜色
	const buttonColor = computed(() => {
	  if (
	    GF_ACCOUNT.value &&
	    mob.value &&
	    moblie_sms_code.value &&
	    name.value &&
	    password.value &&
	    checked.value
	  ) {
	    return '#ffaa00' 
	  } else {
	    return '#e2e2e2' 
	  }
	})
	
	function updateGF_ACCOUNT(event) {
	  GF_ACCOUNT.value = event.detail;
	}

	function updateMob(event) {
	  mob.value = event.detail;
	}

	function updateMoblieSmsCode(event) {
	  moblie_sms_code.value = event.detail; 
	}

	function updateName(event) {
	  name.value = event.detail; 
	}

	function updatePassword(event) {
	  password.value = event.detail;
	}

	// 切换密码可见性
	const togglePasswordVisibility = () => {
	  isPasswordVisible.value = !isPasswordVisible.value;
	};
	
    async function Loading_data() {
	  visit_data.value = globalData.value.VISIT_DATA;
	  system_info.value = globalData.value.SYSTEM_INFO;
    }

	// 查看协议
    function show(page) {
      uni.navigateTo({
        url: `/pages/login/policy?page=${page}`
      });
    }

	// 选择账号
    function User_num() {
      let params = {
        action: 'user_num',
        org: '12',
      };
      decRegisterApi.User_num_API(params).then((res) => {
        num.value = res.data;
        console.log('User_num_API成功，', res);
        GF_ACCOUNT.value = num.value[0]; // 默认选中第一个值
      }).catch((err) => {
        console.error('User_num_API失败，', err);
      });
    }
	
	function togglePopup() {
	  isPopupVisible.value = !isPopupVisible.value;
	  console.log("点击选择账号弹窗值",isPopupVisible.value);
	  if (isPopupVisible.value && firstLoad.value) {
	    User_num(); // 获取账号列表
	    firstLoad.value = false;
	  }
	  console.log("firstLoad值",firstLoad.value);
	}
	
	function selectAccount(account) {
	  this.GF_ACCOUNT = account
	}
	
	function refreshAccounts() {
	  User_num(); // 重新获取账号列表
	}
	
	const accountRows = computed(() => {
	  const rows = [];
	  const chunkSize = 4;
	  for (let i = 0; i < num.value.length; i += chunkSize) {
	    rows.push(num.value.slice(i, i + chunkSize));
	  }
	  return rows;
	});

	// 获取验证码
    function Send_sms(phone_num) {
	  if(!phone_num){
		  console.log("手机号不能为空")
		  return;
	  }
      const ts = Date.now().toString();
      let params = {
		    mob_code: '86',
        mob: phone_num,
        type: '0',
		    client_type: system_info.value.device_type,
        time: ts,
      };
      decRegisterApi.Send_sms_API(params).then((res) => {
        console.log('Send_sms_API成功，', res);
      }).catch((err) => {
        console.error('Send_sms_API失败，', err);
      });
    }

	function getCode(){
		Send_sms(mob.value);
	}
	
    function Login_phone() {
      console.log("注册按钮被点击");
	    Register_by_mobile();
    }

	function Register_by_mobile() {
	  console.log("Register_by_mobile");
	  let MD5password = cryptoUtils.MD5Encrypt(password.value);
	  const params = {
	  		GF_ACCOUNT: GF_ACCOUNT.value,
	  		mob: mob.value,
	  		mobile_sms_code: moblie_sms_code.value,
	  		name: name.value,
	  		password: MD5password,
			  mob_code:'86',
        client_type: system_info.value.device_type
	  };
	  
	  console.log('填写的数据:', params);
    decRegisterApi.Register_by_mobile_API(params).then((res) => {
	    console.log('Register_by_mobile_API成功，', res);
	  }).catch((err) => {
	    console.error('Register_by_mobile_API失败，', err);
	  });
	}
	
    function onChange() {
      checked.value = !checked.value;
    }

    onMounted(async () => {
      await Loading_data();
    });
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.btn {
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
}
.button {
  width: 90%;
  height: 100rpx;
  font-size: 40rpx;
  color: #fff;
  border-radius: 32rpx;
  bottom: 60rpx;
  left: 5%;
  right: 5%;
  border: none;
}
.policy {
  margin-top: 40rpx;
  bottom: 180rpx;
  margin-left: 40rpx;
}
.icon {
  margin-top: 8rpx;
  font-size: 32rpx;
  color: #297FD6;
}
::v-deep .van-button--default {
  background-color: #fdf3ec !important;
  color: #ffaa00 !important;
  width: 160rpx;
}

.custom-dialog {
  position: fixed;
  top: 100rpx; /* 距离页面顶部50px */
  left: 50%;
  transform: translateX(-50%);
  width: 90%; /* 根据需要调整宽度 */
  max-width: 1200rpx; /* 最大宽度 */
  border-radius: 20rpx;
  overflow: hidden;
  background-color: #F8F8F8;
  z-index: 1000;
}

.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F8F8F8;
  height: 300rpx;
}

.account-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.account-item {
  padding: 20rpx;
  text-align: center;
  cursor: pointer;
  font-size: 28rpx;
}

.account-item.selected {
  color: #ffaa00;
}

.refresh-text {
  display: flex;
  align-items: center;
  margin-top: 0;
  font-size: 28rpx;
  color: #909090;
  cursor: pointer;
}

.refresh-icon {
  height: 50rpx; 
  width: 50rpx;  
  margin-right: 10rpx; 
}

::v-deep .van-checkbox__icon--checked {
    background-color: #ffaa00;
    border-color: #ffaa00;
    color: #ffaa00;
}
</style>